<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Add Skills</title>
    <!-- 引入Bulma CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.3/css/bulma.min.css">
</head>
<body>
<section class="section">
    <div class="container">
        <h2 class="title is-centered">添加技能</h2>
        <form action="#" th:action="@{addskills}" method="post" class="box">
            <div class="field">
                <label class="label" for="heroId">英雄ID:</label>
                <div class="control">
                    <input type="text" id="heroId" name="heroId" class="input" required="required" />
                </div>
            </div>
            <div class="field">
                <label class="label" for="skillName">技能名称:</label>
                <div class="control">
                    <input type="text" id="skillName" name="skillName" class="input" required="required" />
                </div>
            </div>
            <div class="field">
                <label class="label" for="skillDescription">技能描述:</label>
                <div class="control">
                    <textarea id="skillDescription" name="skillDescription" class="textarea" required="required"></textarea>
                </div>
            </div>
            <div class="field">
                <label class="label" for="skillType">技能类型:</label>
                <div class="control">
                    <input type="text" id="skillType" name="skillType" class="input" required="required" />
                </div>
            </div>
            <div class="field">
                <label class="label" for="skillCooldown">技能冷却时间:</label>
                <div class="control">
                    <input type="number" id="skillCooldown" name="skillCooldown" class="input" min="1" required="required" />
                </div>
            </div>
            <div class="field">
                <label class="label" for="skillRange">技能范围:</label>
                <div class="control">
                    <input type="text" id="skillRange" name="skillRange" class="input" required="required" />
                </div>
            </div>
            <div class="field">
                <label class="label" for="skillDamage">技能伤害:</label>
                <div class="control">
                    <input type="text" id="skillDamage" name="skillDamage" class="input" required="required" />
                </div>
            </div>
            <div class="field">
                <label class="label" for="skillEffects">技能效果:</label>
                <div class="control">
                    <textarea id="skillEffects" name="skillEffects" class="textarea" required="required"></textarea>
                </div>
            </div>
            <div class="field is-grouped is-grouped-right">
                <div class="control">
                    <button type="submit" class="button is-primary">添加技能！！！</button>
                </div>
            </div>
        </form>
    </div>
</section>
</body>
</html>